<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/AdminTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="title">
        City management
    </ui:define>

    <ui:define name="content">
        <center>
        <p:growl id="growl1" showDetail="true" life="3000" />
        
        <h:form id="form">
            
                <h:panelGrid columns="1">
                    <h:panelGrid columns="1" >
                        <p:dataTable var="cityvar" value="#{CityMBean.citylist}" rowKey="#{cityvar.cityID}" 
                                     selection="#{CityMBean.city}" selectionMode="single" filteredValue="#{CityMBean.filteredCity}" id="citiesTable"
                                     paginator="true" rows="10"  
                                     paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15">
                            <p:ajax event="rowSelect" update=":form:display" oncomplete="cityDialog.show()" />

                            <f:facet name="header">
                                City Management
                            </f:facet>

                            <p:column headerText="City ID" style="width: 50%" sortBy="#{cityvar.cityID}" filterBy="#{cityvar.cityID}">
                                #{cityvar.cityID}
                            </p:column>

                            <p:column headerText="City Name" style="width: 50%" sortBy="#{cityvar.cityName}" filterBy="#{cityvar.cityName}">
                                #{cityvar.cityName}
                            </p:column>

                        </p:dataTable>

                        <p:dialog header="City Detail" widgetVar="cityDialog" resizable="false"  
                                  width="350" showEffect="explode" hideEffect="explode">

                            <h:panelGrid id="display" columns="2" cellpadding="4">

                                <h:outputText value="City ID"/>
                                <h:inputText value="#{CityMBean.city.cityID}" readonly="true"/>                        

                                <h:outputText value="City Name"/>
                                <h:inputText value="#{CityMBean.city.cityName}" />

                                <p:commandButton value="Delete" action="#{CityMBean.removeCity(CityMBean.city.cityID)}" oncomplete="cityDialog.hide()" update=":form:citiesTable, :growl1"/>
                                <p:commandButton value="Update" action="#{CityMBean.editCity(CityMBean.city)}" oncomplete="cityDialog.hide()" update=":form:citiesTable, :growl1"/>

                            </h:panelGrid>
                        </p:dialog>    

                    </h:panelGrid>

                </h:panelGrid>

        </h:form>

        <h:form>
            <h:panelGrid columns="1">

                <p:commandButton id="viewButton" value="Add new City" 
                                 oncomplete="addCityDialog.show()"/> 

                <p:dialog id="dialogadd" header="Add New City" widgetVar="addCityDialog" resizable="false"  
                          showEffect="fade" hideEffect="fade">  
                    <h:panelGrid id="displayAdd" columns="2" cellpadding="4">  
                        <h:outputText value="City ID"/>
                        <p:inputText value="#{CityMBean.city2.cityID}" title="City ID" />                    

                        <h:outputText value="City Name" />
                        <p:inputText value="#{CityMBean.city2.cityName}" title="City Name"/>                    

                    </h:panelGrid>  
                    <p:commandButton value="Create" action="#{CityMBean.createCity()}" oncomplete="addCityDialog.hide()" update=":growl1, :form:citiesTable" />                      

                </p:dialog>

            </h:panelGrid>
            
        </h:form>
        </center>
    </ui:define>

</ui:composition>
